<template>
    <div class="blog-right">
        <div class="blog-aboutme">
            <div class="blog-unit-title"><i class="el-icon-reading"></i>{{currentCourseInfo.cname}}</div>
            <el-divider></el-divider>
            <div style="text-align: center"><el-button type="plain" size="mini" icon="el-icon-circle-plus-outline" @click="expandMenu">展开</el-button><el-button type="plain" size="mini" icon="el-icon-remove-outline" @click="shrinkMenu">收缩</el-button></div>
            <hr>
            <div class="blog-unit-content">
                <el-menu :default-active="activeIndex" :default-openeds="openeds" class="el-menu-demo" mode="vertical"
                         @select="handleSelect">
                    <el-submenu :index="chp.label" v-for="(chp,index) in currentChapterMenuList" :key="index">
                        <template slot="title">{{chp.label}}</template>
                        <!--如果是叶子节点，这里就应该超链接-->
                        <template v-if="!chp.leaf">
                            <template  v-for="(subChp,index2) in chp.children">
                                <el-menu-item v-if="subChp.leaf" :index="subChp.label" :key="index2" @click="changeArticle(subChp.articleId)">{{subChp.label}}
                                </el-menu-item>

                                <el-submenu v-if="!subChp.leaf" :index="subChp.label" :key="index2">
                                    <template slot="title">{{subChp.label}}</template>
                                    <el-menu-item v-for="(thirdSubChp,index3) in subChp.children" :index="thirdSubChp.label" :key="index3" @click="changeArticle(thirdSubChp.articleId)">{{thirdSubChp.label}}</el-menu-item>
                                </el-submenu>
                            </template>
                        </template>
                    </el-submenu>
                </el-menu>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/util/request";

    export default {
        name: "MyCourseDetailsRighter",
        data() {
            return {
                currentCourseId: this.$route.query.cid,
                activeIndex: '1',
                openeds: [],
                currentChapterMenuList: [],
                currentCourseInfo: {} //当前的课程资料
            }
        },

        mounted() {
            //console.log("当前的课程编号是：" + this.currentCourseId);
            this.initCourseChapterMenuList();
            this.initCourseInfo();
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //初始化当前课程的章节菜单列表
            initCourseChapterMenuList() {
                request.get('/blog/chapter/' + this.currentCourseId).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentChapterMenuList = resp.data.data;
                        //console.log("-----该课程的章节信息是----");
                        //console.log(this.currentChapterMenuList);
                        for(let i=0;i<this.currentChapterMenuList.length;i++){
                            this.openeds.push(this.currentChapterMenuList[i].label);
                        }
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //初始当前课程资料
            initCourseInfo() {
                request.get('/blog/course/details/' + this.currentCourseId).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentCourseInfo = resp.data.data;
                        //console.log("-----该课程的信息是----");
                        //console.log(this.currentCourseInfo);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //获取文章编号
            changeArticle(aid){
                console.log("点击章节菜单后获取的最新文章编号："+aid);
                //触发父组件的方法
                this.$emit('showChapterMenuCurrentAid', aid);
            },

            //收缩菜单
            shrinkMenu(){
               this.openeds=[];
            },
            //展开菜单
            expandMenu(){
                let len = this.currentChapterMenuList.length;
                for(let i=0;i<len;i++){
                    this.openeds.push(this.currentChapterMenuList[i].label);
                }
            }
        }
    }
</script>

<style scoped>
    .blog-right {
        width: 100%;
        height: 98%;
        padding: 10px 0px 10px 0px;
        margin: 10px 0px 10px 0px;
        background: #FFF;
    }

    .blog-aboutme {
        margin: 10px;
        border: 1px solid #EEE;
        border-radius: 5px;
        padding: 20px 5px 20px 5px;
    }

    .blog-unit-content {
        color: #666666;
        text-indent: 2em;
        font-size: small;
    }

    .blog-unit-title {
        font-size: larger;
    }

    .blog-unit-title {
        text-align: center;
    }

    .blog-unit-hot li, .blog-unit-friend li {
        list-style: none;
    }

    .blog-unit-hot a, .blog-unit-friend a {
        text-decoration: none;
        color: #336699;
    }

    /*el-menu设置菜单高度*/
    .el-menu-item, >>> .el-submenu__title {
        height: 30px;
        line-height: 30px;
        color: #666;
        font-size: small;
        overflow: hidden;
    }
</style>